<template>
    <div class="visitorpie">
        <div id="visitorpie" class="" style="width: 90%;height:450px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts'
// 引入柱状图
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

export default {
      mounted () {
        this.myChart = echarts.init(document.getElementById('visitorpie'))
        this.initData()
      },
      props: ['pieData'],
      methods: {
        initData () {
          const option = {
            title: {
              text: '用户分布',
              subtext: '',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: ['北京', '上海', '深圳', '杭州', '其他']
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                                {value: this.pieData.beijing, name: '北京'},
                                {value: this.pieData.shanghai, name: '上海'},
                                {value: this.pieData.shenzhen, name: '深圳'},
                                {value: this.pieData.hangzhou, name: '杭州'},
                                {value: this.pieData.qita, name: '其他'}
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }

          this.myChart.setOption(option)
        }
      },
      watch: {
        pieData: function () {
          this.initData()
        }
      }
    }
</script>

<style lang="less" scoped>
    @import '../style/mixin';
    .visitorpie{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
</style>
